(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "react", "maishu-wuzhui", "maishu-wuzhui-helper", "services/activity", "controls/item-dialog", "services/dataSources", "site", "maishu-dilu", "bootstrap-datepicker", "mobile/site", "fields/custom-data-field", "react-dom", "maishu-ui-toolkit"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const React = require("react");
    const wuzhui = require("maishu-wuzhui");
    const wz = require("maishu-wuzhui-helper");
    const activity_1 = require("services/activity");
    const item_dialog_1 = require("controls/item-dialog");
    const dataSources_1 = require("services/dataSources");
    const site_1 = require("site");
    const maishu_dilu_1 = require("maishu-dilu");
    require("bootstrap-datepicker");
    const site_2 = require("mobile/site");
    const custom_data_field_1 = require("fields/custom-data-field");
    const ReactDOM = require("react-dom");
    const maishu_ui_toolkit_1 = require("maishu-ui-toolkit");
    class ActivitiesPage extends React.Component {
        constructor(props) {
            super(props);
            this.state = {};
            this.activity = this.props.createService(activity_1.ActivityService);
        }
        componentDidMount() {
            let it = this;
            new wuzhui.GridView({
                element: this.activityTable,
                dataSource: dataSources_1.dataSources.activity,
                columns: [
                    wz.boundField({ dataField: 'Name', headerText: '活动名称' }),
                    wz.boundField({ dataField: 'BeginDate', headerText: '开始日期', dataFormatString: '{d}' }),
                    wz.boundField({ dataField: 'EndDate', headerText: '结束日期', dataFormatString: '{d}' }),
                    custom_data_field_1.customDataField({
                        headerText: "操作",
                        render(dataItem, element) {
                            ReactDOM.render(React.createElement("div", { className: "text-center" },
                                React.createElement("button", { className: "btn btn-minier btn-info", onClick: () => it.props.app.redirect(`shopping/promotion/activityEdit`, { id: dataItem.Id }) },
                                    React.createElement("i", { className: "icon-cog" }),
                                    React.createElement("span", null, "\u8BBE\u7F6E")),
                                React.createElement("button", { className: "btn btn-minier btn-info", title: "\u70B9\u51FB\u7F16\u8F91", onClick: () => {
                                        it.activityDialog.show(dataItem, "编辑活动", (item) => {
                                            dataSources_1.dataSources.activity.update(item);
                                        });
                                    } },
                                    React.createElement("i", { className: "icon-pencil" })),
                                React.createElement("button", { className: "btn btn-minier btn-danger", title: "\u70B9\u51FB\u5220\u9664", ref: e => {
                                        if (!e)
                                            return;
                                        maishu_ui_toolkit_1.buttonOnClick(e, () => {
                                            return dataSources_1.dataSources.activity.delete(dataItem);
                                        }, { confirm: `确定删除 '${dataItem.Name}' 吗` });
                                    } },
                                    React.createElement("i", { className: "icon-trash" }))), element);
                        }
                    })
                ]
            });
            dataSources_1.dataSources.activity.select();
        }
        newActivity() {
            // this.itemEditor.show();
            this.activityDialog.show({}, "添加活动", (item) => {
                dataSources_1.dataSources.activity.insert(item);
            });
        }
        saveDataItem(dataItem) {
            if (dataItem.Id)
                return this.dataSource.update(dataItem);
            return this.dataSource.insert(dataItem);
        }
        render() {
            return (React.createElement("div", null,
                React.createElement("div", { className: "tabbable" },
                    React.createElement("ul", { className: "nav nav-tabs" },
                        React.createElement("li", { className: "pull-right" },
                            React.createElement("button", { className: "btn btn-primary btn-sm pull-right", ref: e => {
                                    if (!e)
                                        return;
                                    e.onclick = () => this.newActivity();
                                } },
                                React.createElement("i", { className: "icon-plus" }),
                                React.createElement("span", null, "\u6DFB\u52A0"))))),
                React.createElement("table", { className: site_1.default.style.tableClassName, ref: e => this.activityTable = e || this.activityTable }),
                React.createElement(ActivityDialog, { ref: e => this.activityDialog = e || this.activityDialog })));
        }
    }
    exports.default = ActivitiesPage;
    class ActivityDialog extends item_dialog_1.ItemDialog {
        constructor(props) {
            super(props);
            this.NAME = "Name";
            this.BEGIN_DATE = "BeginDate";
            this.END_DATE = "EndDate";
        }
        componentDidMount() {
            this.validator = new maishu_dilu_1.FormValidator(this.element, { name: this.NAME, rules: [maishu_dilu_1.rules.required("请输入活动的名称")] }, { name: this.BEGIN_DATE, rules: [maishu_dilu_1.rules.required("请输入活动的开始日期")] }, { name: this.END_DATE, rules: [maishu_dilu_1.rules.required("请输入活动的结束日期")] });
            let beginDateElement = document.querySelector(`[name="${this.BEGIN_DATE}"]`);
            let endDateElement = document.querySelector(`[name="${this.END_DATE}"]`);
            $([beginDateElement, endDateElement]).datepicker({
                format: "yyyy-mm-dd",
                language: "zh-CN",
                autoclose: true,
            }).on("hide", (e) => {
                let target = e.target;
                let item = this.state.item;
                item[target.name] = new Date(target.value);
            });
        }
        render() {
            let { item } = this.state;
            return React.createElement(React.Fragment, null,
                React.createElement("div", { className: "form-group clearfix" },
                    React.createElement("label", { className: "control-label col-sm-2" }, "\u6D3B\u52A8\u540D\u79F0"),
                    React.createElement("div", { className: "col-sm-10" },
                        React.createElement("input", { name: this.NAME, className: "form-control", autoFocus: true, placeholder: "\u8BF7\u8F93\u5165\u6D3B\u52A8\u7684\u540D\u79F0", value: item.Name || "", onChange: e => {
                                item.Name = e.target.value;
                                this.setState({ item });
                            } }))),
                React.createElement("div", { className: "form-group clearfix" },
                    React.createElement("label", { className: "control-label col-sm-2" }, "\u5F00\u59CB\u65E5\u671F"),
                    React.createElement("div", { className: "col-sm-10" },
                        React.createElement("input", { name: this.BEGIN_DATE, className: "form-control", autoFocus: true, placeholder: "\u8BF7\u8F93\u5165\u6D3B\u52A8\u7684\u5F00\u59CB\u65E5\u671F", value: item.BeginDate ? site_2.formatDate(item.BeginDate) : "", onChange: e => {
                                item.BeginDate = new Date(e.target.value);
                                this.setState({ item });
                            } }))),
                React.createElement("div", { className: "form-group clearfix" },
                    React.createElement("label", { className: "control-label col-sm-2" }, "\u7ED3\u675F\u65E5\u671F"),
                    React.createElement("div", { className: "col-sm-10" },
                        React.createElement("input", { name: this.END_DATE, className: "form-control", autoFocus: true, placeholder: "\u8BF7\u8F93\u5165\u6D3B\u52A8\u7684\u7ED3\u675F\u65E5\u671F", value: item.EndDate ? site_2.formatDate(item.EndDate) : "", onChange: e => {
                                item.EndDate = new Date(e.target.value);
                                this.setState({ item });
                            } }))));
        }
    }
});
